<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商城首页</title>
		<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../jquery-weui-build/dist/css/jquery-weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/dist/lib/weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/demos/css/demos.css">
		<style>
			/*公共样式*/
			ul li{
				list-style: none;
			}
			.clear{
				clear: both;
			}
			/*首页头部样式*/
			.index_top{
				height:50px;
				background:#a78873;
			}
			.index_top .logo{
				height: 30px;
				margin-top:12px;     
				float: left;
				margin-left: 10px;
			}
			.index_top .weui-search-bar{
				background-color: #a78873; 
			}
			.index_top .weui-search-bar:after{
				border: none;
			}
			.index_top .weui-search-bar__form{
				border-radius: 10px;
				margin-top:4px;
			}
			.index_top .weui-search-bar__cancel-btn{
				color: #fff;
				margin-top:4px;
			}
			/*轮播样式*/
			.swiper-container {
		        width: 100%;
		        height: 170px;
		    } 
		
		    .swiper-container img {
		        display: block;
		        width: 100%;
		        height: 100%;
		    }
		    .swiper-pagination-bullet{
		    	background: #fff;
		    	opacity: 1;
		    }
		    .swiper-pagination-bullet-active{
		    	background:#04BE02;
		    }
		    /*公告样式*/
		   .box {
				padding-left:95px;
				background-color:#b69e8c;
				background:url(../static/images/gonggao.jpg) no-repeat;
			}
			.winBox {
				width:100%;
				height:40px;
				overflow:hidden;
				position:relative;
				background:#beb4ad;
			}
			.scroll {
				/*width的大小是根据下面li的长度和多少个li而定的，需注意！*/
				width:1500px;
				position:absolute;
				left:0px;
				top:0px;
				
			}
			.scroll li {
				float:left;
				line-height:40px;
				text-align:center;
				margin-left:20px;
				color: #fff;
				font-size: 14px;
			}
			/*中间四个导航样式*/
			.center_nav{
				background: #e6e1dc;
				padding-bottom: 10px;
			}
			.center_nav .weui-flex__item{
				text-align: center;
			}
			.center_nav .weui-flex__item .center_logo{
				display: block;
				width: 70%;
				border-radius: 50%;
				margin: 10px auto 5px;
			}
			.center_nav .weui-flex__item .center_tit{
				color:#a59889 ;
				font-weight: 600;
				font-size: 14px;
			}
			/*分类样式*/
			.classify .class_big{
				padding:20px 0;
				border: 1px solid #f5f5f5;
			}
			.classify .weui-flex__item .class_logo{
				width: 90%;
			}
			.classify .weui-flex__item .class_tit{
				font-size: 16px;
				font-weight: 600;
				margin-left: 3px;
			}
			.classify .weui-flex__item .class_des{
				font-size: 14px;
				color: #999;
				margin-left: 3px;
			}
			/*推荐产品列表样式*/
			.list{
				background: #ede9dd;
			}
			.list .tj_tit{
				line-height: 39px;
				text-align: center;
				font-size: 18px;
			}
			.list .list_item{
				width: 50%;
				float: left;
				margin-bottom:10px;
			}
			.list .list_item_con{
				width: 94%;
				margin: 0 auto;
				border: 1px solid #ddd;
				background: #fff;
			}
			.list .list_item_con img{
				width: 100%;
			}
			.list .list_item_con .des{
				color: #806b58;
				font-size: 14px;
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				padding:0 8px;
			}
			.list .list_item_con .option{
				height: 30px;
			}
			.list .list_item_con .price{
				color:#a56656 ;
				font-weight: 600;
				float: left;
				margin-left: 5px;
				line-height: 30px;
			}
			.list .list_item_con .mun{
				float: right;
				margin-right: 5px;
				font-size: 14px;
				line-height: 30px;
				color: #959595;
			}
		</style>
	</head>
	<body>
		<!--头部代码-->
		<div class="index_top">
			<img class="logo" src="../static/images/logo.png" alt="logo">
			<!--搜索框-->
			<div class="weui-search-bar" id="searchBar">
			    <form class="weui-search-bar__form" action="#">
			        <div class="weui-search-bar__box">
			          <i class="weui-icon-search"></i>
			          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
			          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
			        </div>
			        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
			          <i class="weui-icon-search"></i>
			          <span>搜索</span>
			        </label>
			    </form>
		      	<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
		    </div>
		</div>
		<!--幻灯片代码-->
		<div class="swiper-container">
	      	<!-- Additional required wrapper -->
	      	<div class="swiper-wrapper">
		        <!-- Slides -->
		        <div class="swiper-slide"><img src="../static/images/swiper-1.jpg" /></div>
		        <div class="swiper-slide"><img src="../static/images/swiper-1.jpg" /></div>
		        <div class="swiper-slide"><img src="../static/images/swiper-1.jpg" /></div>
	      	</div>
	      	<!-- If we need pagination -->
	      	<div class="swiper-pagination"></div>
	    </div>
	    <!----公告--->
		<div class="box">
		  	<div class="winBox">
			    <ul class="scroll">
			      <li>本店从11月11日到11月18日部分商品进行降价处理，欢迎大家购买！！</li>
			      <!--给所要的内容复制一份-->
			      <li>本店从11月11日到11月18日部分商品进行降价处理，欢迎大家购买！！</li>
			    </ul>
		  	</div>
		</div>	

		<!--四个中间导航-->
		<div class="weui-flex center_nav">
  			<div class="weui-flex__item">
  				<a href="">
	  				<img class="center_logo" src="../static/images/center_nav1.png"/>
	  				<p class="center_tit">全部分类</p>
	  			</a>
  			</div>
  			<div class="weui-flex__item">
  				<a href="">
	  				<img class="center_logo" src="../static/images/center_nav2.png"/>
	  				<p class="center_tit">最新产品</p>
	  			</a>
  			</div>
  			<div class="weui-flex__item">
  				<a href="">
	  				<img class="center_logo" src="../static/images/center_nav3.png"/>
	  				<p class="center_tit">推荐商品</p>
	  			</a>
  			</div>
  			<div class="weui-flex__item">
  				<a href="">
	  				<img class="center_logo" src="../static/images/center_nav4.png"/>
	  				<p class="center_tit">联系我们</p>
	  			</a>
  			</div>
		</div>
	
		<!--产品分类--->
		<div class="weui-flex classify">
		  	<div class="weui-flex__item class_big">
		  		<div class="weui-flex">
				  	<div class="weui-flex__item">
				  		<p class="class_tit">幼儿专区</p>
				  		<p class="class_des">满400减30</p>
				  	</div>
				  	<div class="weui-flex__item">
				  		<img class="class_logo" src="../static/images/classfiy.jpg">
				  	</div>
				</div>
		  	</div>
		  	<div class="weui-flex__item class_big">
		  		<div class="weui-flex">
				  	<div class="weui-flex__item">
				  		<p class="class_tit">幼儿专区</p>
				  		<p class="class_des">满400减30</p>
				  	</div>
				  	<div class="weui-flex__item">
				  		<img class="class_logo" src="../static/images/classfiy.jpg">
				  	</div>
				</div>
		  	</div>
		</div>
		<!--推荐产品-->
		<div class="list">
			<P class="tj_tit">推荐商品</P>
			<ul>
				<li class="list_item">
					<div class="list_item_con">
						<img src="../static/images/shop1.jpg">
						<P class="des">商品描述两行商品描述商品描述</P>
						<p class="option">
							<span class="price">￥158.00</span>
							<span class="mun">已售128件</span>
						</p>
					</div>
				</li>
				<li class="list_item">
					<div class="list_item_con">
						<img src="../static/images/shop1.jpg">
						<P class="des">商品描述两行商品描述商品描述</P>
						<p class="option">
							<span class="price">￥158.00</span>
							<span class="mun">已售128件</span>
						</p>
					</div>
				</li>
				<li class="list_item">
					<div class="list_item_con">
						<img src="../static/images/shop1.jpg">
						<P class="des">商品描述两行商品描述商品描述</P>
						<p class="option">
							<span class="price">￥158.00</span>
							<span class="mun">已售128件</span>
						</p>
					</div>
				</li>
				<li class="list_item">
					<div class="list_item_con">
						<img src="../static/images/shop1.jpg">
						<P class="des">商品描述两行商品描述商品描述</P>
						<p class="option">
							<span class="price">￥158.00</span>
							<span class="mun">已售128件</span>
						</p>
					</div>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		                                                           
		<!--底部菜单-->
                  
		
		
	<script src="../jquery-weui-build/dist/lib/jquery-2.1.4.js"></script>
	<script src="../jquery-weui-build/dist/js/jquery-weui.js"></script>
	<script src="../jquery-weui-build/dist/js/city-picker.js"></script>	
	<!--拓展组件-->
	
	<script type='text/javascript' src='../jquery-weui-build/dist/js/swiper.js' charset='utf-8'></script>
	<script type='text/javascript' src='../jquery-weui-build/dist/lib/fastclick.js' charset='utf-8'></script>
	<script>
	$(function() {
    	FastClick.attach(document.body);
    	//幻灯片
    	$(".swiper-container").swiper({
	        loop: true,
	        autoplay: 3000
	    });
	    //公告
	    var num = 0;
	    function goLeft() {
	        //750是根据你给的尺寸，可变的
	        if (num == -750) {
	            num = 0;
	        }
	        num -= 1;
	        $(".scroll").css({
	            left: num
	        })
	    }
	    //设置滚动速度
	    var timer = setInterval(goLeft, 30);
	    //设置鼠标经过时滚动停止
	    $(".box").hover(function() {
	        clearInterval(timer);
	    },
	    function() {
	        timer = setInterval(goLeft, 30);
	    })
  	});
      
    </script>
	</body>
</html>
